<template>
  <DataTable url="multiDictionary/list" ref="ds" pageable>
    <template #tools="table">
      <Button v-if="ADD" icon="jeicon-add" color="primary" @click="add">新增</Button>
      <Button v-if="ADD" icon="jeicon-add" color="primary" @click="showAddMulti">快速添加</Button>
      <Button v-if="EDIT" :disabled="selects.length!=1" icon="h-icon-edit" text-color="yellow" @click="editFirst">修改
      </Button>
      <Poptip v-if="DELETE" :disabled="selects.length==0" class="h-btn h-btn-red"
              content="确定删除所选字典及其子级字典？" @confirm="del">
        <Button icon="h-icon-trash" :disabled="selects.length==0" color="red">删除</Button>
      </Poptip>

    </template>
    <template #search="table">
      <Input type="text" v-model="table.params.sn" placeholder="编码"/>
      <Input type="text" v-model="table.params.parentSn" placeholder="父级编码"/>
      <Input type="text" v-model="table.params.rank" placeholder="层级（从1开始）"/>
      <Input type="text" v-model="table.params.name" placeholder="名称"/>
    </template>
    <template #default="table">
      <Table :datas="table.data" :loading="table.loading" @trDblClick="edit" @select="selected" checkbox
             selectWhenClickTr>
        <TableItem title="序号" prop="$serial" :width="50"></TableItem>
        <TableItem title="编码" prop="sn"></TableItem>
        <TableItem title="名称" prop="name"></TableItem>
        <TableItem title="自定义编码" prop="code"></TableItem>
        <TableItem title="图标" prop="icon"></TableItem>
      </Table>
    </template>
  </DataTable>
  <Dialog href="platform/multiDictionaryDialog.vue" ref="dlg" hasDivider hasCloseIcon>
    <template #header>多级字典</template>
    <template #footer="dlg">
      <Button @click="dlg.cancel">取消</Button>
      <Button :loading="dlg.loading" color="primary" @click="dlg.submit">确认</Button>
    </template>
  </Dialog>
  <Modal v-model="addMulti.show" :closeOnMask="false">
    <template #header>快速添加字典</template>
    <Form :model="addMulti" :rules="{}">
      <FormItem label="父级编码" prop="parentSn">
        <Input type="text" v-model="addMulti.parentSn"/>
      </FormItem>
      <FormItem label="名称" prop="names" required>
        <Textarea type="text" v-model="addMulti.names" placeholder="字典名称，以换行分隔"
                  style="resize: none;height: 120px;"/>
      </FormItem>
    </Form>
    <template #footer>
      <Button @click="addMulti.show=false">取消</Button>
      <Button :loading="addMulti.loading" color="primary" @click="submitMulti">确认</Button>
    </template>
  </Modal>
</template>
<script setup>
import {ajax, util, hasPermission, format} from 'framework'
import {ref, reactive} from 'vue'
import {message} from 'heyui'

//权限
const ADD = hasPermission('system.multiDictionary.add'), EDIT = hasPermission('system.multiDictionary.edit'),
    DELETE = hasPermission('system.multiDictionary.delete')

//数据集
const ds = ref({})
const showSearch = ref(false), selects = ref([]);
//对话框的引用,可通过dlg.value.ref获取页面的引用
const dlg = ref({})
const addMulti = reactive({
  show: false,
  loading: false,
  parentSn: '',
  names: '',
})

function search() {
  selects.value = []
  ds.value.reload()
}

function selected(v) {
  selects.value = v.map(it => util.fields(it, 'sn'))
}

async function add() {
  await dlg.value.open()
  search()
}

async function showAddMulti() {
  Object.assign(addMulti, {
    show: true,
    loading: false,
    parentSn: null,
    names: '',
  })
}

function submitMulti() {
  if (!addMulti.names) {
    message('字典名称不能为空')
    return
  }
  addMulti.loading = true
  ajax.post('multiDictionary/addMulti', {parentSn: addMulti.parentSn, name: addMulti.names})
      .then(r => {
        addMulti.show = false
        ds.value.load()
      }).finally(_ => {
    addMulti.loading = false
  })


}

function editFirst() {
  if (selects.value.length == 0) {
    return;
  }
  edit(selects.value[0])
}

async function edit(v) {
  if (!EDIT) {
    return;
  }
  await dlg.value.open(util.fields(v, 'sn'))
  search()
}

async function del() {
  if (!DELETE) {
    return;
  }

  await ajax.post('multiDictionary/delete', selects.value.map(it => it.sn))
  search()
}
</script>
